<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="theme-color" content="#2563eb">
    <title>豪华地产 - 在线咨询</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=c39d8c3a1e5c0f5b6a7d9e2f4b1c8a0d"></script>
    <style>
        body {
            font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
            -webkit-tap-highlight-color: transparent;
        }
        .scrollbar-hide::-webkit-scrollbar {
            display: none;
        }
        .scrollbar-hide {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
        .card-shadow {
            box-shadow: 0 4px 20px rgba(37, 99, 235, 0.1);
        }
        .message-bubble-left {
            border-radius: 18px 18px 18px 4px;
        }
        .message-bubble-right {
            border-radius: 18px 18px 4px 18px;
        }
        .message-status {
            font-size: 10px;
            color: rgba(156, 163, 175, 0.8);
            margin-top: 2px;
            text-align: right;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 4px;
        }
        .unread-indicator {
            width: 6px;
            height: 6px;
            background-color: #2563eb;
            border-radius: 50%;
            display: inline-block;
            margin-left: 4px;
            vertical-align: middle;
        }
        .new-message-indicator {
            position: fixed;
            bottom: 80px;
            left: 50%;
            transform: translateX(-50%);
            background-color: rgba(37, 99, 235, 0.9);
            color: white;
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 12px;
            display: none;
            align-items: center;
            gap: 6px;
            cursor: pointer;
            z-index: 50;
            box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2);
        }
        .message-date-divider {
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 16px 0;
            position: sticky;
            top: 0;
            z-index: 1;
        }
        .message-date-divider::before,
        .message-date-divider::after {
            content: '';
            flex: 1;
            height: 1px;
            background: rgba(229, 231, 235, 0.8);
            margin: 0 8px;
        }
        .message-status-icon {
            width: 14px;
            height: 14px;
        }
        .message-sending {
            animation: pulse 1.5s infinite;
        }
        @keyframes pulse {
            0% { opacity: 1; }
            50% { opacity: 0.5; }
            100% { opacity: 1; }
        }
        .typing-indicator {
            display: inline-flex;
            align-items: center;
            background: rgba(229, 231, 235, 0.5);
            padding: 8px 12px;
            border-radius: 16px;
            margin-bottom: 8px;
        }
        .typing-dot {
            width: 6px;
            height: 6px;
            background: #6B7280;
            border-radius: 50%;
            margin: 0 2px;
            animation: typing 1.4s infinite;
        }
        @keyframes typing {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-4px); }
        }
        .message-read-status {
            display: inline-flex;
            align-items: center;
            gap: 2px;
            transition: all 0.3s ease;
        }
        .message-read-status.read {
            color: #2563eb;
        }
        .message-read-status svg {
            width: 14px;
            height: 14px;
        }
        .notification-dot {
            position: absolute;
            top: -2px;
            right: -2px;
            width: 8px;
            height: 8px;
            background-color: #ef4444;
            border-radius: 50%;
            border: 2px solid white;
        }
        @keyframes notification-wave {
            0% { transform: scale(0.8); opacity: 1; }
            100% { transform: scale(2); opacity: 0; }
        }
        .notification-wave {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: #ef4444;
            animation: notification-wave 1s ease-out infinite;
        }
    </style>
</head>
<body class="bg-gray-50 text-gray-800">
    <div class="page bg-white min-h-screen flex flex-col">
        <!-- 头部 -->
        <div class="sticky top-0 z-10 bg-blue-600 text-white">
            <div class="flex items-center justify-between p-4">
                <a href="index.html" class="flex items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                    </svg>
                </a>
                <div class="flex flex-col items-center">
                    <h1 class="text-lg font-bold">在线咨询</h1>
                    <span class="text-xs text-white/80">销售顾问：张经理</span>
                </div>
                <a href="tel:15192426370" class="bg-white/20 backdrop-blur-sm p-2 rounded-full">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                    </svg>
                </a>
            </div>
        </div>

        <!-- 消息区域 -->
        <div class="flex-grow p-4 overflow-y-auto pb-36 scrollbar-hide">
            <!-- 销售经理信息卡片 -->
            <div class="mb-6 bg-white rounded-xl overflow-hidden card-shadow">
                <div class="bg-gradient-to-r from-blue-600 to-blue-500 text-white p-4">
                    <div class="flex items-center">
                        <div class="w-16 h-16 bg-white rounded-full overflow-hidden mr-4 border-2 border-white">
                            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="销售经理" class="w-full h-full object-cover">
                        </div>
                        <div>
                            <h3 class="font-bold text-lg">张经理</h3>
                            <p class="text-white/80 text-xs">资深销售总监 | 8年从业经验</p>
                            <div class="flex items-center mt-1">
                                <div class="bg-green-500 w-2 h-2 rounded-full mr-1"></div>
                                <span class="text-xs">在线</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 时间分割线 -->
            <div class="flex justify-center mb-6">
                <span class="text-xs text-gray-400 bg-gray-100 px-3 py-1 rounded-full">今天 10:30</span>
            </div>

            <!-- 系统消息 -->
            <div class="flex justify-center mb-6">
                <div class="bg-gray-100 text-gray-500 rounded-full px-4 py-2 text-xs max-w-[80%] text-center">
                    张经理已加入对话，为您提供专业置业咨询服务
                </div>
            </div>

            <!-- 顾问消息 -->
            <div class="flex mb-4">
                <div class="w-8 h-8 rounded-full overflow-hidden mr-2 flex-shrink-0">
                    <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="销售经理" class="w-full h-full object-cover">
                </div>
                <div class="max-w-[70%]">
                    <div class="bg-gray-100 p-3 message-bubble-left inline-block">
                        <p class="text-sm">您好，我是御景豪庭的销售总监张经理，很高兴为您服务！请问您对哪个楼盘或户型感兴趣呢？</p>
                    </div>
                    <div class="text-xs text-gray-400 mt-1 ml-1">10:31</div>
                </div>
            </div>

            <!-- 顾问消息2 -->
            <div class="flex mb-4">
                <div class="w-8 h-8 rounded-full overflow-hidden mr-2 flex-shrink-0">
                    <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="销售经理" class="w-full h-full object-cover">
                </div>
                <div class="max-w-[70%]">
                    <div class="bg-gray-100 p-3 message-bubble-left inline-block">
                        <p class="text-sm">目前我们有御景豪庭、湖景公馆等多个热门楼盘，是刚需、改善还是投资需求呢？</p>
                    </div>
                    <div class="text-xs text-gray-400 mt-1 ml-1">10:32</div>
                </div>
            </div>

            <!-- 用户消息 -->
            <div class="flex justify-end mb-4">
                <div class="max-w-[70%]">
                    <div class="bg-blue-600 p-3 message-bubble-right inline-block text-white">
                        <p class="text-sm">您好，我对御景豪庭的三居室户型比较感兴趣，想了解一下价格和配套设施。</p>
                    </div>
                    <div class="text-xs text-gray-400 mt-1 mr-1 text-right">10:35</div>
                </div>
            </div>

            <!-- 顾问消息3 -->
            <div class="flex mb-4">
                <div class="w-8 h-8 rounded-full overflow-hidden mr-2 flex-shrink-0">
                    <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="销售经理" class="w-full h-full object-cover">
                </div>
                <div class="max-w-[70%]">
                    <div class="bg-gray-100 p-3 message-bubble-left inline-block">
                        <p class="text-sm">御景豪庭的三居室户型面积约106㎡，均价32,000元/㎡，总价约340万起。小区配套设施齐全，包括游泳池、健身房、儿童乐园等，周边有知名学校和大型商场。</p>
                    </div>
                    <div class="text-xs text-gray-400 mt-1 ml-1">10:36</div>
                </div>
            </div>

            <!-- 顾问发送房源卡片 -->
            <div class="flex mb-4">
                <div class="w-8 h-8 rounded-full overflow-hidden mr-2 flex-shrink-0">
                    <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="销售经理" class="w-full h-full object-cover">
                </div>
                <div class="max-w-[70%]">
                    <div class="bg-gray-100 p-3 message-bubble-left">
                        <div class="bg-white rounded-lg overflow-hidden border border-gray-200 w-56">
                            <img src="https://images.unsplash.com/photo-1560185007-cde436f6a4d0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="御景豪庭" class="w-full h-32 object-cover">
                            <div class="p-2">
                                <h3 class="font-bold text-sm">御景豪庭 三室两厅</h3>
                                <p class="text-xs text-gray-500">106㎡ | 南北通透 | 精装修</p>
                                <div class="text-blue-600 text-sm font-medium mt-1">¥340万起</div>
                            </div>
                        </div>
                    </div>
                    <div class="text-xs text-gray-400 mt-1 ml-1">10:37</div>
                </div>
            </div>

            <!-- 顾问提问 -->
            <div class="flex mb-4">
                <div class="w-8 h-8 rounded-full overflow-hidden mr-2 flex-shrink-0">
                    <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="销售经理" class="w-full h-full object-cover">
                </div>
                <div class="max-w-[70%]">
                    <div class="bg-gray-100 p-3 message-bubble-left inline-block">
                        <p class="text-sm">您最近有看房计划吗？如果方便，可以预约线下看房，我可以带您实地看看这个户型。</p>
                    </div>
                    <div class="text-xs text-gray-400 mt-1 ml-1">10:38</div>
                </div>
            </div>

            <!-- 快捷回复选项 -->
            <div class="grid grid-cols-2 gap-2 mb-4">
                <button class="bg-blue-50 text-blue-600 p-2 rounded-lg text-sm text-center">我想预约看房</button>
                <button class="bg-blue-50 text-blue-600 p-2 rounded-lg text-sm text-center">了解更多户型</button>
                <button class="bg-blue-50 text-blue-600 p-2 rounded-lg text-sm text-center">询问优惠政策</button>
                <button class="bg-blue-50 text-blue-600 p-2 rounded-lg text-sm text-center">查看沙盘位置</button>
            </div>
        </div>

        <!-- 底部输入区域 -->
        <div class="fixed bottom-16 left-0 right-0 bg-white border-t border-gray-100 p-2 flex items-center">
            <button class="p-2 text-gray-500">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                </svg>
            </button>
            <div class="flex-grow bg-gray-100 rounded-full mx-2 px-4 py-2">
                <input type="text" placeholder="请输入您想咨询的问题..." class="w-full bg-transparent outline-none text-sm">
            </div>
            <button class="bg-blue-600 text-white p-2 rounded-full">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M12 5l7 7-7 7" />
                </svg>
            </button>
        </div>

        <!-- 底部导航 -->
        <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 z-20">
            <div class="grid grid-cols-5 h-16">
                <a href="index.html" class="flex flex-col items-center justify-center text-gray-400">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7m-7-7v14" />
                    </svg>
                    <span class="text-xs mt-1">首页</span>
                </a>
                <a href="property-list.html" class="flex flex-col items-center justify-center text-gray-400">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
                    </svg>
                    <span class="text-xs mt-1">楼盘列表</span>
                </a>
                <a href="floor-plan-list.html" class="flex flex-col items-center justify-center text-gray-400">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7" />
                    </svg>
                    <span class="text-xs mt-1">户型列表</span>
                </a>
                <a href="appointment.html" class="flex flex-col items-center justify-center text-gray-400">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                    </svg>
                    <span class="text-xs mt-1">预约看房</span>
                </a>
                <a href="my.html" class="flex flex-col items-center justify-center text-blue-600">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                    </svg>
                    <span class="text-xs mt-1">我的</span>
                </a>
            </div>
        </div>

        <!-- 新消息提示器 -->
        <div id="newMessageIndicator" class="new-message-indicator" onclick="scrollToBottom()">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
            </svg>
            <span>新消息</span>
        </div>
    </div>

    <!-- 加号菜单弹出层 -->
    <div id="plusMenu" class="fixed inset-0 bg-black/70 z-50 hidden">
        <div class="absolute bottom-0 left-0 right-0 bg-white rounded-t-2xl">
            <div class="p-4 border-b border-gray-100 flex justify-between items-center">
                <h3 class="text-lg font-bold">更多功能</h3>
                <button class="p-2" onclick="document.getElementById('plusMenu').classList.add('hidden')">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
            </div>
            <div class="p-4 grid grid-cols-4 gap-4">
                <a href="#" class="flex flex-col items-center">
                    <div class="w-12 h-12 bg-blue-50 rounded-full flex items-center justify-center mb-1">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                        </svg>
                    </div>
                    <span class="text-sm">发送图片</span>
                </a>
                <a href="#" class="flex flex-col items-center">
                    <div class="w-12 h-12 bg-blue-50 rounded-full flex items-center justify-center mb-1">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                        </svg>
                    </div>
                    <span class="text-sm">发送文件</span>
                </a>
                <a href="#" class="flex flex-col items-center">
                    <div class="w-12 h-12 bg-blue-50 rounded-full flex items-center justify-center mb-1">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                        </svg>
                    </div>
                    <span class="text-sm">发送位置</span>
                </a>
                <a href="#" class="flex flex-col items-center">
                    <div class="w-12 h-12 bg-blue-50 rounded-full flex items-center justify-center mb-1">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                        </svg>
                    </div>
                    <span class="text-sm">预约看房</span>
                </a>
            </div>
        </div>
    </div>

    <!-- 添加音频元素 -->
    <audio id="messageSound" preload="auto">
        <source src="https://assets.mixkit.co/active_storage/sfx/2354/2354-preview.mp3" type="audio/mpeg">
    </audio>

    <script>
        // 添加新的全局变量
        let notificationEnabled = true;
        let vibrationEnabled = true;
        let soundEnabled = true;
        let lastReadTimestamp = new Date().getTime();
        const messageSound = document.getElementById('messageSound');

        // 添加消息提醒函数
        function notifyNewMessage() {
            if (!document.hasFocus() && notificationEnabled) {
                // 播放提示音
                if (soundEnabled) {
                    messageSound.play().catch(err => console.log('无法播放提示音:', err));
                }
                
                // 震动提醒
                if (vibrationEnabled && navigator.vibrate) {
                    navigator.vibrate([200, 100, 200]);
                }
                
                // 发送桌面通知
                if (Notification.permission === "granted") {
                    new Notification("新消息", {
                        body: "您有一条新的咨询消息",
                        icon: "https://randomuser.me/api/portraits/men/32.jpg"
                    });
                }
            }
        }

        // 请求通知权限
        if (Notification.permission !== "granted" && Notification.permission !== "denied") {
            Notification.requestPermission();
        }

        document.querySelectorAll('.bg-blue-50').forEach(btn => {
            btn.addEventListener('click', function() {
                const message = this.textContent;
                const messageList = document.querySelector('.flex-grow.p-4');
                
                // 添加用户消息
                const userMsg = document.createElement('div');
                userMsg.className = 'flex justify-end mb-4';
                userMsg.innerHTML = `
                    <div class="max-w-[70%]">
                        <div class="bg-blue-600 p-3 message-bubble-right inline-block text-white">
                            <p class="text-sm">${message}</p>
                        </div>
                        <div class="text-xs text-gray-400 mt-1 mr-1 text-right">${getCurrentTime()}</div>
                    </div>
                `;
                messageList.appendChild(userMsg);
                
                // 滚动到底部
                messageList.scrollTop = messageList.scrollHeight;
                
                // 模拟顾问响应（延迟1秒）
                setTimeout(() => {
                    const advisorMsg = document.createElement('div');
                    advisorMsg.className = 'flex mb-4';
                    let responseText = '';
                    
                    if (message.includes('预约看房')) {
                        responseText = '好的，我们可以为您安排看房。请问您方便哪天看房？周末也可以为您安排专车接送。';
                    } else if (message.includes('更多户型')) {
                        responseText = '御景豪庭还有两室一厅78㎡和四室两厅143㎡的户型，每种户型都有不同的优势，可以根据您的家庭情况推荐最合适的选择。';
                    } else if (message.includes('优惠政策')) {
                        responseText = '目前我们有多种优惠活动：首付分期、一次性付款95折、老客户推荐额外1%折扣等。具体可以根据您的需求详细说明。';
                    } else if (message.includes('沙盘位置')) {
                        responseText = '您可以到我们的售楼处查看沙盘模型，位于南京东路1688号。或者我可以发送项目电子沙盘给您参考。';
                    }
                    
                    advisorMsg.innerHTML = `
                        <div class="w-8 h-8 rounded-full overflow-hidden mr-2 flex-shrink-0">
                            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="销售经理" class="w-full h-full object-cover">
                        </div>
                        <div class="max-w-[70%]">
                            <div class="bg-gray-100 p-3 message-bubble-left inline-block">
                                <p class="text-sm">${responseText}</p>
                            </div>
                            <div class="text-xs text-gray-400 mt-1 ml-1">${getCurrentTime()}</div>
                        </div>
                    `;
                    
                    messageList.appendChild(advisorMsg);
                    messageList.scrollTop = messageList.scrollHeight;
                }, 1000);
            });
        });
        
        // 获取当前时间
        function getCurrentTime() {
            const now = new Date();
            const hours = now.getHours().toString().padStart(2, '0');
            const minutes = now.getMinutes().toString().padStart(2, '0');
            return `${hours}:${minutes}`;
        }
        
        // 添加滚动处理函数
        let isUserScrolling = false;
        let hasNewMessage = false;
        const messageList = document.querySelector('.flex-grow.p-4');
        const newMessageIndicator = document.getElementById('newMessageIndicator');

        function scrollToBottom(smooth = true) {
            messageList.scrollTo({
                top: messageList.scrollHeight,
                behavior: smooth ? 'smooth' : 'auto'
            });
            hasNewMessage = false;
            newMessageIndicator.style.display = 'none';
            markAllMessagesAsRead();
        }

        function isScrolledToBottom() {
            return Math.abs(messageList.scrollHeight - messageList.clientHeight - messageList.scrollTop) < 50;
        }

        messageList.addEventListener('scroll', () => {
            isUserScrolling = true;
            if (isScrolledToBottom()) {
                hasNewMessage = false;
                newMessageIndicator.style.display = 'none';
                markAllMessagesAsRead();
            }
            setTimeout(() => {
                isUserScrolling = false;
            }, 100);
        });

        function markAllMessagesAsRead() {
            document.querySelectorAll('.unread-indicator').forEach(indicator => {
                indicator.remove();
            });
            document.querySelectorAll('.message-status.unread').forEach(status => {
                status.textContent = '已读';
                status.classList.remove('unread');
            });
        }

        // 添加日期分组函数
        function formatMessageDate(date) {
            const now = new Date();
            const messageDate = new Date(date);
            const diffDays = Math.floor((now - messageDate) / (1000 * 60 * 60 * 24));
            
            if (diffDays === 0) {
                return '今天';
            } else if (diffDays === 1) {
                return '昨天';
            } else if (diffDays < 7) {
                const days = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
                return days[messageDate.getDay()];
            } else {
                return `${messageDate.getMonth() + 1}月${messageDate.getDate()}日`;
            }
        }

        // 修改添加消息函数
        function addMessage(messageHtml, isUserMessage = false) {
            const date = new Date();
            const dateStr = formatMessageDate(date);
            
            // 检查是否需要添加新的日期分割线
            const lastDateDivider = messageList.querySelector('.message-date-divider:last-of-type');
            if (!lastDateDivider || lastDateDivider.textContent !== dateStr) {
                const dateDivider = `
                    <div class="message-date-divider">
                        <span class="text-xs bg-white text-gray-400 px-3 py-1 rounded-full">${dateStr}</span>
                    </div>
                `;
                messageList.insertAdjacentHTML('beforeend', dateDivider);
            }
            
            messageList.insertAdjacentHTML('beforeend', messageHtml);
            
            if (!isScrolledToBottom() && !isUserMessage) {
                hasNewMessage = true;
                newMessageIndicator.style.display = 'flex';
                notifyNewMessage();
            } else {
                scrollToBottom(false);
                markAllMessagesAsRead();
            }
        }

        // 更新未读消息数
        function updateUnreadCount() {
            const unreadMessages = document.querySelectorAll('.message-status.unread').length;
            if (unreadMessages > 0) {
                document.title = `(${unreadMessages}) 豪华地产 - 在线咨询`;
            } else {
                document.title = '豪华地产 - 在线咨询';
            }
        }

        // 修改标记已读函数
        function markAllMessagesAsRead() {
            const unreadMessages = document.querySelectorAll('.message-status.unread');
            if (unreadMessages.length > 0) {
                unreadMessages.forEach(status => {
                    status.innerHTML = `
                        <div class="message-read-status read">
                            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M18 7L16.59 5.59L10 12.17L7.41 9.59L6 11L10 15L18 7Z" fill="currentColor"/>
                            </svg>
                            <span>已读</span>
                        </div>
                    `;
                    status.classList.remove('unread');
                });
                updateUnreadCount();
                lastReadTimestamp = new Date().getTime();
            }
        }

        // 添加页面可见性变化监听
        document.addEventListener('visibilitychange', () => {
            if (!document.hidden && isScrolledToBottom()) {
                markAllMessagesAsRead();
            }
        });

        // 添加窗口焦点监听
        window.addEventListener('focus', () => {
            if (isScrolledToBottom()) {
                markAllMessagesAsRead();
            }
        });

        // 获取输入框和发送按钮元素
        const messageInput = document.querySelector('input[type="text"]');
        const sendButton = document.querySelector('.bg-blue-600.text-white.p-2.rounded-full');

        // 修复回车发送消息
        messageInput.addEventListener('keypress', function(e) {
            if (e.key === 'Enter' && !e.shiftKey) {
                e.preventDefault();
                sendMessage();
            }
        });

        // 修复发送按钮点击事件
        sendButton.addEventListener('click', sendMessage);

        // 修复加号按钮点击事件
        const plusButton = document.querySelector('button.p-2.text-gray-500');
        plusButton.addEventListener('click', function() {
            const plusMenu = document.getElementById('plusMenu');
            plusMenu.classList.remove('hidden');
        });

        // 修复消息发送函数
        function sendMessage() {
            const message = messageInput.value.trim();
            if (message) {
                const userMsg = `
                    <div class="flex justify-end mb-4">
                        <div class="max-w-[70%]">
                            <div class="bg-blue-600 p-3 message-bubble-right inline-block text-white">
                                <p class="text-sm">${message}</p>
                            </div>
                            <div class="text-xs text-gray-400 mt-1 mr-1 text-right">${getCurrentTime()}</div>
                        </div>
                    </div>
                `;
                const messageList = document.querySelector('.flex-grow.p-4');
                messageList.insertAdjacentHTML('beforeend', userMsg);
                messageList.scrollTop = messageList.scrollHeight;
                messageInput.value = '';

                // 显示顾问正在输入状态
                setTimeout(() => {
                    const typingMsg = `
                        <div class="flex mb-4" id="typingIndicator">
                            <div class="w-8 h-8 rounded-full overflow-hidden mr-2 flex-shrink-0">
                                <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="销售经理" class="w-full h-full object-cover">
                            </div>
                            <div class="typing-indicator">
                                <div class="typing-dot" style="animation-delay: 0s"></div>
                                <div class="typing-dot" style="animation-delay: 0.2s"></div>
                                <div class="typing-dot" style="animation-delay: 0.4s"></div>
                            </div>
                        </div>
                    `;
                    messageList.insertAdjacentHTML('beforeend', typingMsg);
                    messageList.scrollTop = messageList.scrollHeight;

                    // 2秒后显示顾问回复
                    setTimeout(() => {
                        document.getElementById('typingIndicator')?.remove();
                        const response = generateResponse(message);
                        const advisorMsg = `
                            <div class="flex mb-4">
                                <div class="w-8 h-8 rounded-full overflow-hidden mr-2 flex-shrink-0">
                                    <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="销售经理" class="w-full h-full object-cover">
                                </div>
                                <div class="max-w-[70%]">
                                    <div class="bg-gray-100 p-3 message-bubble-left inline-block">
                                        <p class="text-sm">${response}</p>
                                    </div>
                                    <div class="text-xs text-gray-400 mt-1 ml-1">${getCurrentTime()}</div>
                                </div>
                            </div>
                        `;
                        messageList.insertAdjacentHTML('beforeend', advisorMsg);
                        messageList.scrollTop = messageList.scrollHeight;
                    }, 2000);
                }, 500);
            }
        }

        // 生成回复内容的函数
        function generateResponse(message) {
            if (message.includes('价格') || message.includes('多少钱') || message.includes('预算')) {
                return '我们的房源价格从300万起，具体可以根据您的预算为您推荐合适的户型。您期望的预算范围是多少呢？';
            } else if (message.includes('户型') || message.includes('面积')) {
                return '我们有78-143平米的户型可选，包括两室一厅、三室两厅和四室两厅，每种户型都有不同的优势。您想了解哪种户型呢？';
            } else if (message.includes('位置') || message.includes('在哪')) {
                return '我们的楼盘位于城市核心区域，周边配套设施齐全，交通便利。需要我为您发送具体位置信息吗？';
            } else if (message.includes('看房') || message.includes('预约')) {
                return '好的，我可以帮您安排看房。我们提供专车接送服务，您方便哪天看房呢？';
            } else {
                return '感谢您的咨询。您想了解楼盘的哪些具体信息呢？比如价格、户型、位置或者配套设施等。';
            }
        }

        // 输入框获得焦点时的效果
        messageInput.addEventListener('focus', function() {
            this.parentElement.classList.add('ring-2', 'ring-blue-600', 'ring-opacity-50');
        });

        messageInput.addEventListener('blur', function() {
            this.parentElement.classList.remove('ring-2', 'ring-blue-600', 'ring-opacity-50');
        });

        // 监听输入框变化，动态调整发送按钮状态
        messageInput.addEventListener('input', function() {
            if (this.value.trim()) {
                sendButton.classList.add('bg-blue-600');
                sendButton.classList.remove('bg-blue-400');
            } else {
                sendButton.classList.remove('bg-blue-600');
                sendButton.classList.add('bg-blue-400');
            }
        });

        // 点击遮罩层关闭菜单
        document.getElementById('plusMenu').addEventListener('click', function(e) {
            if (e.target === this) {
                this.classList.add('hidden');
            }
        });

        // 处理加号菜单中的功能按钮点击
        document.querySelectorAll('#plusMenu a').forEach(button => {
            button.addEventListener('click', function(e) {
                e.preventDefault();
                const messageList = document.querySelector('.flex-grow.p-4');
                const action = this.querySelector('span').textContent;
                let systemMessage = '';

                switch(action) {
                    case '发送图片':
                        const fileInput = document.createElement('input');
                        fileInput.type = 'file';
                        fileInput.accept = 'image/*';
                        fileInput.click();
                        fileInput.onchange = function() {
                            if (this.files && this.files[0]) {
                                const reader = new FileReader();
                                reader.onload = function(e) {
                                    const userMsg = `
                                        <div class="flex justify-end mb-4">
                                            <div class="max-w-[70%]">
                                                <div class="bg-blue-600 p-3 message-bubble-right inline-block text-white">
                                                    <img src="${e.target.result}" class="max-w-full rounded-lg" alt="用户上传图片">
                                                </div>
                                                <div class="text-xs text-gray-400 mt-1 mr-1 text-right">${getCurrentTime()}</div>
                                            </div>
                                        </div>
                                    `;
                                    messageList.insertAdjacentHTML('beforeend', userMsg);
                                    messageList.scrollTop = messageList.scrollHeight;
                                };
                                reader.readAsDataURL(this.files[0]);
                            }
                        };
                        systemMessage = '图片已发送';
                        break;

                    case '发送文件':
                        const docInput = document.createElement('input');
                        docInput.type = 'file';
                        docInput.click();
                        docInput.onchange = function() {
                            if (this.files && this.files[0]) {
                                const fileName = this.files[0].name;
                                const userMsg = `
                                    <div class="flex justify-end mb-4">
                                        <div class="max-w-[70%]">
                                            <div class="bg-blue-600 p-3 message-bubble-right inline-block text-white">
                                                <div class="flex items-center">
                                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                                                    </svg>
                                                    <span class="text-sm">${fileName}</span>
                                                </div>
                                            </div>
                                            <div class="text-xs text-gray-400 mt-1 mr-1 text-right">${getCurrentTime()}</div>
                                        </div>
                                    </div>
                                `;
                                messageList.insertAdjacentHTML('beforeend', userMsg);
                                messageList.scrollTop = messageList.scrollHeight;
                            }
                        };
                        systemMessage = '文件已发送';
                        break;

                    case '发送位置':
                        if (navigator.geolocation) {
                            navigator.geolocation.getCurrentPosition(function(position) {
                                const latitude = position.coords.latitude;
                                const longitude = position.coords.longitude;
                                const amapUrl = `https://uri.amap.com/marker?position=${longitude},${latitude}&name=我的位置`;
                                
                                const userMsg = `
                                    <div class="flex justify-end mb-4">
                                        <div class="max-w-[70%]">
                                            <div class="bg-blue-600 p-3 message-bubble-right inline-block text-white">
                                                <a href="${amapUrl}" target="_blank" class="flex items-center">
                                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                                                    </svg>
                                                    <div class="flex flex-col">
                                                        <span class="text-sm font-medium">我的位置</span>
                                                        <span class="text-xs opacity-75">点击在高德地图中查看</span>
                                                    </div>
                                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-2 opacity-75" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                                                    </svg>
                                                </a>
                                            </div>
                                            <div class="text-xs text-gray-400 mt-1 mr-1 text-right">${getCurrentTime()}</div>
                                        </div>
                                    </div>
                                `;
                                messageList.insertAdjacentHTML('beforeend', userMsg);
                                messageList.scrollTop = messageList.scrollHeight;

                                // 使用高德地图HTTP API获取地址信息
                                fetch(`https://restapi.amap.com/v3/geocode/regeo?location=${longitude},${latitude}&key=c39d8c3a1e5c0f5b6a7d9e2f4b1c8a0d&radius=1000&extensions=all`)
                                    .then(response => response.json())
                                    .then(data => {
                                        if (data.status === '1' && data.regeocode) {
                                            const address = data.regeocode.formatted_address;
                                            const addressMsg = `
                                                <div class="flex justify-end mb-4">
                                                    <div class="max-w-[70%]">
                                                        <div class="bg-blue-600 p-3 message-bubble-right inline-block text-white">
                                                            <div class="flex items-center">
                                                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                                                                </svg>
                                                                <span class="text-sm">${address}</span>
                                                            </div>
                                                        </div>
                                                        <div class="text-xs text-gray-400 mt-1 mr-1 text-right">${getCurrentTime()}</div>
                                                    </div>
                                                </div>
                                            `;
                                            messageList.insertAdjacentHTML('beforeend', addressMsg);
                                            messageList.scrollTop = messageList.scrollHeight;
                                        }
                                    })
                                    .catch(error => {
                                        console.error('获取地址信息失败:', error);
                                    });

                            }, function(error) {
                                let errorMessage = '获取位置信息失败';
                                switch(error.code) {
                                    case error.PERMISSION_DENIED:
                                        errorMessage = '请允许访问您的位置信息';
                                        break;
                                    case error.POSITION_UNAVAILABLE:
                                        errorMessage = '无法获取当前位置';
                                        break;
                                    case error.TIMEOUT:
                                        errorMessage = '获取位置信息超时';
                                        break;
                                }
                                const errorMsg = `
                                    <div class="flex justify-center mb-4">
                                        <div class="bg-red-100 text-red-500 rounded-full px-4 py-2 text-xs max-w-[80%] text-center">
                                            ${errorMessage}
                                        </div>
                                    </div>
                                `;
                                messageList.insertAdjacentHTML('beforeend', errorMsg);
                                messageList.scrollTop = messageList.scrollHeight;
                            }, {
                                enableHighAccuracy: true,
                                timeout: 5000,
                                maximumAge: 0
                            });
                        } else {
                            const errorMsg = `
                                <div class="flex justify-center mb-4">
                                    <div class="bg-red-100 text-red-500 rounded-full px-4 py-2 text-xs max-w-[80%] text-center">
                                        您的浏览器不支持位置服务
                                    </div>
                                </div>
                            `;
                            messageList.insertAdjacentHTML('beforeend', errorMsg);
                            messageList.scrollTop = messageList.scrollHeight;
                        }
                        systemMessage = '位置信息已发送';
                        break;

                    case '预约看房':
                        window.location.href = 'appointment.html';
                        return;
                }

                // 关闭菜单
                document.getElementById('plusMenu').classList.add('hidden');

                // 显示系统消息
                if (systemMessage) {
                    setTimeout(() => {
                        const systemMsg = `
                            <div class="flex justify-center mb-4">
                                <div class="bg-gray-100 text-gray-500 rounded-full px-4 py-2 text-xs max-w-[80%] text-center">
                                    ${systemMessage}
                                </div>
                            </div>
                        `;
                        messageList.insertAdjacentHTML('beforeend', systemMsg);
                        messageList.scrollTop = messageList.scrollHeight;

                        // 添加顾问回复
                        setTimeout(() => {
                            // 显示"正在输入"状态
                            const typingMsg = `
                                <div class="flex mb-4" id="typingIndicator">
                                    <div class="w-8 h-8 rounded-full overflow-hidden mr-2 flex-shrink-0">
                                        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="销售经理" class="w-full h-full object-cover">
                                    </div>
                                    <div class="bg-gray-100 px-4 py-2 rounded-full inline-block">
                                        <div class="flex space-x-1">
                                            <div class="w-2 h-2 bg-gray-500 rounded-full animate-bounce"></div>
                                            <div class="w-2 h-2 bg-gray-500 rounded-full animate-bounce" style="animation-delay: 0.2s"></div>
                                            <div class="w-2 h-2 bg-gray-500 rounded-full animate-bounce" style="animation-delay: 0.4s"></div>
                                        </div>
                                    </div>
                                </div>
                            `;
                            messageList.insertAdjacentHTML('beforeend', typingMsg);
                            messageList.scrollTop = messageList.scrollHeight;

                            // 2秒后显示顾问回复
                            setTimeout(() => {
                                // 移除"正在输入"状态
                                const typingIndicator = document.getElementById('typingIndicator');
                                if (typingIndicator) {
                                    typingIndicator.remove();
                                }

                                let advisorResponse = '';
                                switch(action) {
                                    case '发送图片':
                                        advisorResponse = '收到您发送的图片了。如果您需要了解更多房源图片，我这边也可以为您发送更多实景照片和样板间图片。';
                                        break;
                                    case '发送文件':
                                        advisorResponse = '已收到您的文件。如果您需要楼盘相关的文件资料，比如户型图、价目表等，我也可以为您提供。';
                                        break;
                                    case '发送位置':
                                        advisorResponse = '已收到您的位置信息。我可以为您介绍附近的优质楼盘，或者帮您规划看房路线。您感兴趣的是哪个区域呢？';
                                        break;
                                }

                                if (advisorResponse) {
                                    const advisorMsg = `
                                        <div class="flex mb-4">
                                            <div class="w-8 h-8 rounded-full overflow-hidden mr-2 flex-shrink-0">
                                                <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="销售经理" class="w-full h-full object-cover">
                                            </div>
                                            <div class="max-w-[70%]">
                                                <div class="bg-gray-100 p-3 message-bubble-left inline-block">
                                                    <p class="text-sm">${advisorResponse}</p>
                                                </div>
                                                <div class="text-xs text-gray-400 mt-1 ml-1">${getCurrentTime()}</div>
                                            </div>
                                        </div>
                                    `;
                                    messageList.insertAdjacentHTML('beforeend', advisorMsg);
                                    messageList.scrollTop = messageList.scrollHeight;
                                }
                            }, 2000);
                        }, 1000);
                    }, 500);
                }
            });
        });

        // 添加设置按钮到头部
        const headerRight = document.querySelector('.flex.items-center.justify-between.p-4');
        const settingsButton = document.createElement('button');
        settingsButton.className = 'bg-white/20 backdrop-blur-sm p-2 rounded-full ml-2';
        settingsButton.innerHTML = `
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
            </svg>
        `;

        // 添加设置菜单
        const settingsMenu = document.createElement('div');
        settingsMenu.className = 'fixed inset-0 bg-black/70 z-50 hidden';
        settingsMenu.innerHTML = `
            <div class="absolute bottom-0 left-0 right-0 bg-white rounded-t-2xl">
                <div class="p-4 border-b border-gray-100 flex justify-between items-center">
                    <h3 class="text-lg font-bold">消息设置</h3>
                    <button class="p-2" onclick="this.parentElement.parentElement.parentElement.classList.add('hidden')">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                        </svg>
                    </button>
                </div>
                <div class="p-4">
                    <div class="flex items-center justify-between py-2">
                        <span class="text-gray-700">声音提醒</span>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" class="sr-only peer" checked id="soundToggle">
                            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
                        </label>
                    </div>
                    <div class="flex items-center justify-between py-2">
                        <span class="text-gray-700">震动提醒</span>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" class="sr-only peer" checked id="vibrationToggle">
                            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
                        </label>
                    </div>
                    <div class="flex items-center justify-between py-2">
                        <span class="text-gray-700">桌面通知</span>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" class="sr-only peer" checked id="notificationToggle">
                            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
                        </label>
                    </div>
                </div>
            </div>
        `;

        // 添加设置按钮点击事件
        settingsButton.addEventListener('click', () => {
            settingsMenu.classList.remove('hidden');
        });

        // 添加设置切换事件监听
        document.getElementById('soundToggle').addEventListener('change', (e) => {
            soundEnabled = e.target.checked;
        });

        document.getElementById('vibrationToggle').addEventListener('change', (e) => {
            vibrationEnabled = e.target.checked;
        });

        document.getElementById('notificationToggle').addEventListener('change', (e) => {
            notificationEnabled = e.target.checked;
            if (e.target.checked && Notification.permission !== "granted") {
                Notification.requestPermission();
            }
        });

        // 将设置按钮和菜单添加到页面
        headerRight.appendChild(settingsButton);
        document.body.appendChild(settingsMenu);
    </script>
</body>
</html> 